<template>
  <el-card class="card_outsides">
    <template #header>
      <div class="card-header">
        <span>产品BOM数据</span>
      </div>
    </template>

    <div class="page-content">
      <!-- 过滤和操作栏 -->
      <div class="filter-bar">
        <div class="left-actions">
          <el-input
            v-model="searchQuery"
            placeholder="产品品号, 物料品号"
            :prefix-icon="Search"
            clearable
            style="width: 240px"
          />
          <el-button class="sync-button" @click="handleSyncData">同步数据</el-button>
          <span class="sync-time-label">最近同步时间: {{ lastSyncTime }}</span>
        </div>
        <div class="right-actions">
          <el-button plain @click="handleClearFilters">清空全部条件</el-button>
        </div>
      </div>

      <!-- 主内容区 - 空状态 -->
      <el-main class="main-content">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :row-class-name="tableRowClassName"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
            header-align="center"
          />
          <el-table-column prop="productCategory" label="产品分类" width="100" />
          <el-table-column prop="partNumber" label="品号" width="170" />
          <el-table-column prop="productName" label="品名" width="150" />
          <el-table-column prop="drawingNumber" label="图号" width="150" />
          <el-table-column prop="flowchartNumber" label="流程图号" width="150" />
          <el-table-column prop="specifications" label="规格" show-overflow-tooltip />
          <el-table-column prop="description" label="描述" show-overflow-tooltip />
          <el-table-column prop="unit" label="单位" width="80" align="center" />
        </el-table>
        <div v-if="pagination.total > 0" style="display: flex; margin-top: 20px; justify-content: flex-end">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="prev, pager, next, jumper, ->, slot"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <div class="footer-status-bar">
              <el-tag class="product-count-tag" size="large">
                产品数 {{ pagination.total }}
              </el-tag>
              <el-button :icon="MoreFilled" circle />
            </div>
          </el-pagination>
        </div>
      </el-main>

      <!-- 右下角状态栏 -->
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search, MoreFilled } from '@element-plus/icons-vue'
import { ElHeader, ElMain, ElInput, ElButton, ElEmpty, ElTag } from 'element-plus'
import { ProductSpecificationsApi, ProductSpecificationsVO } from '@/api/productspecifications'
import { currentTime } from '@/utils/currentTime'
// 搜索查询
const searchQuery = ref('')

const lastSyncTime = ref('2025/06/06 20:00:00')
const syncData = () => {
  lastSyncTime.value = currentTime()
}

// 模拟表格数据
const tableData = ref<ProductSpecificationsVO[]>([])

// 新增分页状态
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const fetchProductList = async () => {
  try {
    const params = {
      page: pagination.currentPage,
      size: pagination.pageSize,
      keyword: searchQuery.value // 使用搜索词作为查询条件
    }
    const response = await ProductSpecificationsApi.getProductSpecificationsPage(params)
    tableData.value = response.list
    pagination.total = response.total
  } catch (error) {
    console.error('获取产品BOM数据失败:', error)
  }
}

// 为表格行添加自定义 class
const tableRowClassName = () => {
  return 'data-row-highlight'
}

// 事件处理函数
const handleSyncData = () => {
  console.log('同步数据')
  // 在这里添加同步数据的逻辑
}

const handleClearFilters = () => {
  searchQuery.value = ''
  console.log('清空全部条件')
  // 在这里添加清空其他过滤条件的逻辑
}

onMounted(() => {
  fetchProductList()
  syncData()
})

// 新增：分页事件处理
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  fetchProductList()
}

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  fetchProductList()
}

// 新增：监听搜索词变化触发重新加载
watch(searchQuery, () => {
  pagination.currentPage = 1 // 搜索时重置为第一页
  fetchProductList()
})
</script>

<style scoped>
.page-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.left-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sync-button {
  color: white;
  background-color: #95d475; /* 图片中的石灰绿色 */
  border-color: #95d475;
}

.sync-button:hover,
.sync-button:focus {
  color: white;
  background-color: #a0e482;
  border-color: #a0e482;
}

.main-content {
  justify-content: center;
  align-items: center;
}

/* 覆盖 el-main 的默认内边距，因为父级已经有了 */
.el-main {
  padding: 0;
}

.footer-status-bar {
  display: flex;
  padding: 15px 20px;
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
  justify-content: flex-end;
  align-items: center;
}

.product-count-tag {
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  color: white;
  background-color: #95d475;
  border: none;
}

/* 覆盖 el-button 的默认样式使其与 tag 协调 */
.footer-status-bar .el-button {
  border-color: #dcdfe6;
}
</style>